盒子
盒子
文章目录
  1. Before we get started
  2. 关于 __proto__ 和 prototype
  3. JavaScript 实现继承的几种方式
    1. 构造继承
    2. 原型继承
    3. 实例继承
    4. 拷贝继承
    5. Call 继承
    6. 中间件继承
    7. Object.create()
    8. ES6 的 extends

关于 JavaScript 继承和原型链

2018.08.05 FogDong JavaScript

Before we get started

首先明确，JS 的继承是由原型链来实现的。（即使在ES6中 class 的 extends，也更像是一种语法糖）

当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的原型对象（prototype）。该原型对象也有一个自己的原型对象 ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

C++ 和 Java 使用 new 命令时，都会调用”类”的构造函数（constructor）
在 Javascript 语言中，new 命令后面跟的不是类，而是构造函数
在 JavaScript 中，构造器其实就是一个普通的函数。当使用 new 操作符 来作用这个函数时，它就可以被称为构造方法（构造函数）。

那么new运算符具体干了什么呢？

1
2
3
var obj  = {};
obj.__proto__ = F.prototype;
F.call(obj);

即

1
2
3
4
5
6
var o = new Foo();
// JavaScript 实际上执行的是：
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);

关于 __proto__ 和 prototype

那么上面的 __proto__ 和 prototype 又是什么呢？

对象具有属性 __proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型。
eg.

1
2
3
let o1 = new Object()
// 则
o1.__proto__ ===  Object.prototype // true

而 Function 是特殊的对象，在 Function 中，除了和其他对象一样有 __proto__ 对象以外，还有原型属性（prototype），这个属性指向原型对象，而原型对象有个叫 constructor 的属性，指回原构造函数。
eg.

1
2
3
4
5
6
7
8
let f1 = new Foo()
// 则
f1.__proto__ === Foo.prototype
Foo.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null
Foo.prototype.constructor === Foo

Object 的原型对象用 Object.prototype.__proto__ = null 表示原型链的最顶端，如此变形成了 javascript 的原型链继承，同时也解释了为什么所有的 javascript 对象都具有 Object 的基本方法。

Object 关于 prototype 的两个方法

1
2
3
4
// 等同于 B.__proto__= A
Object.setPrototypeOf(B, A)
// 从子类上获取父类
Object.getPrototypeOf(B)

JavaScript 实现继承的几种方式

构造继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function dog (name) {
	this.name = name
}
// 共享的属性放在 prototype 中，只要更改 prototype，所有实例的 master 属性都会被更改
dog.prototype = { master: 'Fog' }
// 生成两个实例对象
let dog1 = new dog('111')
let dog2 = new dog('222')
console.log(dog1.master) // Fog
console.log(dog2.master) // Fog
// 更改master
dog.prototype.master = 'Misty'
console.log(dog1.master) // Misty
console.log(dog2.master) // Misty

由于所有的实例对象共享同一个 prototype 对象，那么从外界看起来，prototype 对象就好像是实例对象的原型，而实例对象则好像”继承”了 prototype 对象一样。

原型继承

即：把父类的私有+公有的属性和方法，都作为子类公有的属性。
核心思想：Child.prototype = new Parent()
实现的本质是重写了原型对象 ，通过将子类的原型指向了父类的实例，所以子类的实例就可以通过 __proto__ 访问到 Child.prototype 也就是 Parent 的实例

实例继承

核心思想：

1
2
3
4
function Child() {
	let instance = new Parent()
	return instance
}

拷贝继承

核心思想：循环遍历父类实例，然后父类实例的私有方法全部拿过来添加给子类实例

Call 继承

核心思想：

1
2
3
function Child() {
	Parent.call(this); //构造函数中的this就是当前实例
}

注意：call 是 function 的方法

中间件继承

核心思想：Child.prototype.__proto__ = Parent.prototype

Object.create()

ECMAScript 5 中引入了一个新方法：Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数。

ES6 的 extends

首先说明，ES6 的 Class 中，所有定义的 function 方法（注意：在定义类的方法时，前面不需要加上 function 这个保留字），都是定义在 prototype 属性上的。
即：在类的实例上调用方法，其实就是调用原型上的方法。
此外，在类的内部定义的所有方法都是不可枚举的。（与 ES5 不同，注意）

Class 之间可以通过 extends 关键字实现继承。
子类必须在 constructor 方法中调用 super 方法，否则新建实例时会报错。这是因为子类没有自己的 this 对象，而是继承了父类的 this 对象。如果不调用 super 方法，子类就得不到 this 对象。
这与 ES5 不同：ES5 是先创建子类的 this，再将父类的方法添加到 this 上（Parent.apply(this)）
而 ES6：先创建父类的 this，然后再用子类的构造函数修改 this

而 super 指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过 super 调用的